<template>
	<view class="recharge-container">
		<!-- 上方大盒子显示余额 -->
		<view class="balance-box">
			<text class="balance-title">我的余额</text>
			<text class="balance-amount">{{ $store.state.user.user.gold }} 元</text>
		</view>

		<!-- 中间标签 -->
		<view class="tag-container">
			<view v-for="(tag, index) in tags" :key="index" class="tag"
				:class="{ 'tag-selected': selectedTag === tag.id }" @click="selectTag(tag.id)">
				<text>{{ tag.amount }}</text>
				<!-- <tui-icon v-if="selectedTag === tag.id" name="check" :size="24" color="#007aff"
					class="check-icon"></tui-icon> -->
			</view>
		</view>

		<!-- 自定义输入框 -->
		<view v-if="selectedTag === 'custom'" class="custom-input-container">
			<uni-easyinput v-model="customAmount" type="number" placeholder="请输入自定义金额"
				@input="handleCustomInput"></uni-easyinput>
		</view>

		<!-- 确认按钮 -->
		<view class="confirm-button-container">
			<button class="button" @click="confirmRecharge" :disabled="isConfirmButtonDisabled"
				:style="{ 'background': isConfirmButtonDisabled?'var(--thorui-color-pinks)':'var(--thorui-color-pink)','border-color': isConfirmButtonDisabled?'var(--thorui-color-pinks)':'var(--thorui-color-pink)'  }">确认</button>
		</view>
	</view>
</template>

<script>
	import {
		payConfig,
		userPay
	} from '@/api/user.js'

	export default {
		data() {
			return {
				balance: 0, // 示例余额
				selectedTag: '',
				customAmount: '',
				tags: [{
					label: '自定义',
					value: 'custom'
				}]
			};
		},
		onShow() {
			this.getPayConfig()
			// 获取设备ID 用户信息
			this.$store.dispatch('getDeviceId')
			const {
				vipTime
			} = this.$store.state.user.user
			// 如果vip到期时间大于当前时间，就可看无限次
			if (vipTime && (new Date(vipTime).getTime() >= new Date().getTime())) {
				uni.setStorageSync('infinite', true)
			} else {
				uni.setStorageSync('infinite', false)
			}
		},
		computed: {
			isConfirmButtonDisabled() {
				return !this.selectedTag || (this.selectedTag === 'custom' && !this.customAmount);
			}
		},
		methods: {
			selectTag(value) {
				this.selectedTag = value;
				console.log('====', this.selectedTag);
				if (value !== 'custom') {
					this.customAmount = '';
				}
			},
			// 获取充值配置
			getPayConfig() {
				payConfig().then(res => {
					this.tags = res.data
				})
			},
			// 输入框值
			handleCustomInput(value) {
				this.customAmount = value;
			},
			// 确认充值
			confirmRecharge() {
				let amount = this.selectedTag;
				if (this.selectedTag === 'custom') {
					amount = parseFloat(this.customAmount);
				}

				if (amount) {
					let _id = JSON.parse(uni.getStorageSync('userInfo'))._id
					userPay({
						_id: _id,
						id: this.selectedTag
					}).then(res => {
						// 获取设备ID 用户信息
						this.$store.dispatch('getDeviceId')
						// this.balance=this.$store.state.user.user.gold
						uni.showToast({
							title: res.msg,
							icon: 'success'
						});
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					})
				} else {
					uni.showToast({
						title: '请选择或输入金额',
						icon: 'none'
					});
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.recharge-container {
		padding: 20px;
		background-color: #f6f6f6;

		.balance-box {
			background-color: #fff;
			padding: 20px;
			border-radius: 10px;
			text-align: center;
			margin-bottom: 20px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		}

		.balance-title {
			font-size: 16px;
			color: #666;
		}

		.balance-amount {
			font-size: 24px;
			color: var(--thorui-color-pink);
			font-weight: bold;
			margin-top: 10px;
		}

		.tag-container {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-bottom: 20px;

			.tag {
				width: 45%;
				background-color: #fff;
				border: 1px solid #ddd;
				border-radius: 5px;
				padding: 10px 20px;
				margin-bottom: 10px;
				box-sizing: border-box;
				position: relative;
				text-align: center;
				cursor: pointer;
				transition: border-color 0.3s, background-color 0.3s;
			}

			.tag-selected {
				border-color: var(--thorui-color-pink);
				background-color: var(--thorui-color-pinks);
			}

			.check-icon {
				position: absolute;
				top: 5px;
				right: 5px;
			}
		}

		.custom-input-container {
			margin-bottom: 20px;
		}

		.confirm-button-container {
			display: flex;
			justify-content: center;
		}

		.button {
			width: 100%;
			border-radius: 50rpx;
			border: 2rpx solid var(--thorui-color-pink);
			background: var(--thorui-color-pink);
			color: white;
		}
	}
</style>